<template>
	<view>
		<tn-nav-bar alpha backTitle=""></tn-nav-bar>
			<view :style="{ paddingTop: vuex_custom_bar_height + 'px' }"> </view>


			<view class="title">
				<view>是否立即</view>
				<view>
					录入宠物面容
				</view>
			</view>
		<view class="container">
    <image class="cat-img" src="/static/image/damao.png" mode="aspectFill" />
    <view class="steps">
      <view class="step">
        <text class="step-title">1. 准备设备</text>
        <view class="step-content">
          <text>• 确保设备已开启并且处于宠物面容录入模式。一般情况下，您可以通过设备的主界面进入"设置"或"面容录入"功能。</text>
        </view>
      </view>
      <view class="step">
        <text class="step-title">2. 确保光线良好</text>
        <view class="step-content">
          <text>• 在录入宠物面容时，请确保周围环境光线充足且均匀，避免过暗或直射光源。自然光或室内白光最为理想。</text>
        </view>
        <view class="step-content">
          <text>• 确保宠物安静站立</text>
        </view>
        <view class="step-content">
          <text>• 请让您的宠物处于静止状态，确保面部清晰可见，避免过多的动作干扰面部识别过程。</text>
        </view>
      </view>
      <view class="step">
        <text class="step-title">3. 对准摄像头</text>
        <view class="step-content">
          <text>• 准备设备 确保设备已开启并且处于宠物面容录入模式。一般情况下，您可以通过设备的主界面进入“设置”或“面容录入”功能。 确保光线良好 在录入宠物面容时，请确保周围环境光线充足且均匀，避免过暗或直射光源。自然光或室内白光最为理想。 确保宠物安静站立 请让您的宠物处于静止状态，确保面部清晰可见，避免过多的动作干扰面部识别过程。 对准摄像头 将设备的摄像头对准宠物的面部。请确保摄像头与宠物面部的距离在设备支持的范围内，一般为20-30厘米，具体距离可参考设备提示。。</text>
        </view>
      </view>
    </view>
		<view class="tips" style="height: 100px;">
		
		</view>
    <view class="btn-wrap">
      <button class="next-btn u-f-ajc" @click="next">下一步</button>
    </view>
  </view>
	</view>

</template>

<script>
export default {
  methods: {
    next() {
      // 跳转到面容录入页面
      uni.navigateTo({ url: './photo' })
    }
  }
}
</script>

<style scoped>
.title {
	
	font-size: 46rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 0rpx;
	color: #111;
	margin-top: 0px;
}
.container {
  padding: 0 32rpx 32rpx 32rpx;
  background: #fff;
  box-sizing: border-box;
}
.cat-img {
  width: 100%;
  height: 360rpx;
  border-radius: 36rpx;
  object-fit: cover;
  margin-top: 32rpx;
  margin-bottom: 32rpx;
  display: block;
}
.steps {
  color: #222;
  font-size: 30rpx;
  line-height: 1.7;
}
.step {
  margin-bottom: 24rpx;
}
.step-title {
  font-weight: 600;
  font-size: 32rpx;
  margin-bottom: 8rpx;
  display: block;
}
.step-content {
  margin-left: 16rpx;
  color: #666;
  font-size: 28rpx;
  margin-bottom: 4rpx;
}
.btn-wrap {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 48rpx;
  display: flex;
  justify-content: center;
  z-index: 10;
}
.next-btn {
  width: 90vw;
  height: 96rpx;
  background: #111;
  color: #fff;
  border-radius: 48rpx;
  font-size: 36rpx;
  font-weight: 500;
  border: none;
  box-shadow: 0 4rpx 24rpx 0 rgba(0,0,0,0.10);
}
</style>
